<template>
  <div style="padding: 10px">
    <d-edit-table
      :data="tableData"
      :columns="columns"
      border
      ref="dEditTableRef"
      :disabled="isDisabled"></d-edit-table>
    <div style="padding: 10px">
      <d-button type="primary" @click="submit">提交</d-button>
      <d-button type="danger" @click="resetFields">重置</d-button>
      <d-button type="warning" @click="disabled">{{ isDisabled ? '启用' : '禁用' }}</d-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  // import { DEditTable } from '../../../lib/d-el-plus.js'
  const options = [
    { label: '男', value: '1' },
    { label: '女', value: '2' }
  ]
  const tree = [
    {
      value: '1',
      label: 'Level one 1',
      children: [
        {
          value: '1-1',
          label: 'Level two 1-1'
        }
      ]
    }
  ]
  const tableData = ref([
    { date: '2016-05-03', name: '', switch: true },
    { date: '2016-05-02', name: '', switch: false },
    { date: '2016-05-04', name: '', switch: true }
  ])
  const columns = ref([
    { label: '日期', prop: 'date', cType: 'date' },
    { label: '普通', prop: 'date', align: 'center', width: 120 },
    {
      label: 'input',
      prop: 'name',
      cType: 'input',
      asterisk: true,
      rules: [{ required: true, message: '哈哈输入', trigger: 'blur' }]
    },
    {
      label: 'select',
      prop: 'sex',
      cType: 'select',
      asterisk: true,
      rules: [{ required: true, message: '请选择', trigger: 'change' }],
      formChildConfig: {
        options: options
      }
    },
    {
      label: 'selectTree',
      prop: 'leval',
      cType: 'selectTree',
      asterisk: true,
      rules: [{ required: true, message: '请选择', trigger: 'change' }],
      formChildConfig: {
        nodeKey: 'value',
        options: tree
      }
    },
    {
      label: 'checkbox',
      prop: 'checkbox',
      cType: 'checkbox',
      asterisk: true,
      rules: [{ required: true, message: '请选择', trigger: 'change' }],
      formChildConfig: {
        options: options,
        onChange(v) {
          console.log('v: ', v)
        }
      }
    },
    {
      label: 'radio',
      prop: 'radio',
      cType: 'radio',
      asterisk: true,
      rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }],
      formChildConfig: {
        options: options
      }
    },
    {
      label: 'switch',
      prop: 'switch',
      cType: 'switch',
      asterisk: true,
      rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }],
      formChildConfig: {
        activeText: '是',
        inactiveText: '否',
        inlinePrompt: true
      }
    },
    {
      label: 'cascader',
      prop: 'cascader',
      cType: 'cascader',
      asterisk: true,
      rules: [{ required: true, message: '请选择', trigger: 'change' }],
      formChildConfig: {
        options: tree
      }
    }
  ])
  const dEditTableRef = ref<InstanceType<typeof DEditTable> | null>(null)
  const submit = () => {
    console.log('tableData: ', tableData.value)

    dEditTableRef.value?.validate()
  }
  const isDisabled = ref(false)
  const disabled = () => {
    isDisabled.value = !isDisabled.value
    dEditTableRef.value?.clearValidate()
  }
  const resetFields = () => {
    dEditTableRef.value?.resetFields()
  }
</script>
<style scoped lang="scss">
  ::v-deep(.el-table) {
    .even-row {
      background-color: #fae7f0;
    }
    .odd-row {
      background-color: #f8e7d9;
    }
  }
</style>
